<template>
  <view class="template-shop tn-safe-area-inset-bottom">
    <!-- 顶部自定义导航 -->
       <tn-nav-bar fixed :bottomShadow="false">我加入的邀约</tn-nav-bar>   

 
    <view class="" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
   <view class="" style="width: 100%;">
	   <tn-tabs :list="list"  activeColor="#e19600" :bold="true" inactiveColor="#5b5b5b" :activeItemStyle="activeItemStyle" :isScroll="true" :current="currenttiezi" name="tab-name" @change="change"></tn-tabs>
   
   </view>
    </view> 
     <mescroll-body ref="mescrollRef" @down="downCallback" @up="upCallback">
 <view class="wallpaper-shadow tn-margin " v-for="(item,index) in content" :key="index"  @click="navigateToFn({ url: '/circleMixinPages/team/show?id='+item.id, checkLogin: false })">	

		<view class="tn-flex tn-flex-col-top" >    
		<view class="tn-tag-content tn-shadow-blur tn-cool-bg-color-4 tn-margin-right tn-text-sm tn-text-bold">
		{{item.cate}}
		</view>
          <view class="" >
			  
            <view class="logo-pic">
              <view class="logo-image">
               <tn-avatar class="" :src="item.userInfo.avatar" size="lg" shape="circle">
               </tn-avatar>	
              </view>
            </view>
          </view>
          <view class="tn-padding-left-sm" style="width: 100%;">
            <view class="tn-flex tn-flex-row-between tn-flex-col-between">
              <view class="justify-content-item">
                <text class="tn-color-wallpaper tn-color-gray tn-text-bold">{{item.userInfo.nickname}}</text>
              </view>
            </view>
            <view class=" tn-padding-top-xs  tn-text-ellipsis-2">
              <rich-text :nodes="item.detail"></rich-text>
            </view>
          </view>
        </view>
        <view class="tn-flex tn-flex-row-between tn-flex-col-between tn-margin-top-sm">
          <view class="justify-content-item tn-color-gray tn-text-center tn-color-gray">
            <text class="tn-icon-time tn-padding-right-xs tn-padding-left-xs tn-text-df"></text>
            <text class="tn-text-sm">{{item.time}}</text>
          </view>
          <view class="justify-content-item tn-round tn-text-xs tn-bg-blue--light tn-color-blue" style="padding: 5rpx 15rpx;">
         {{item.num_join}}/{{item.num}}
          </view>
        </view>

		
      </view>
      

    </mescroll-body>
   
    <view class='tn-tabbar-height'></view>

	<!-- 登录框组件 -->
		<login-fn :is-show-login="loginBoxFlag" @loginSuccessCallback="refreshFn" @close="closeGlobalLoginFn">
		</login-fn>
  </view>
</template>

<script>
	import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
		import MescrollBody from '@/components/mescroll-uni/mescroll-body.vue';
		import MescrollUni from '@/components/mescroll-uni/mescroll-uni.vue';
		import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';
		export default {
			name: 'TemplateGroup',
			mixins: [template_page_mixin,MescrollMixin],
			components: {
				MescrollBody
			},
			

    data(){
      return { 
		  activeItemStyle: {			
		  	fontSize: `32rpx`,
		  	color: `#000000`
		  },
			dalei:0,
		    type:0,
			loginBoxFlag: false, // 登录框显示隐藏状态
			id:0,
		  	currenttiezi:0,
			list:[],
			xiaolei:0,
			searchKey:'',
			content: []      
      }
    },
	onLoad(option) {
		if (option.id){
			this.id=option.id
		}	
		
	let that = this
	this.info()
	uni.$off('setLoginBoxFlag');
	uni.$on('setLoginBoxFlag', loginBoxFlag => {
		that.loginBoxFlag = loginBoxFlag;
	});
	uni.$on('zujufabu', data => {	
		that.mescroll.resetUpScroll()
	});
	
	
	},
    methods: {
		xuan(item){
			uni.$emit('shop',item)
			uni.navigateBack()
		},
    async info() {
    	let that = this;
    	let result = await that.$request({
    		loading: 0,
    		method: 'post',
    		url: '/chat/yuehui/getclass',
    		data: {
    			id:that.id								
    		}
    	});    
    
    	if (result.statusCode == 200) {    	  			
				that.list=result.data.data				
			}   
    },
      // 跳转
      tn(e) {
        uni.navigateTo({
          url: e,
        });
      },
    change(index) {
    	this.currenttiezi = index
		this.dalei=this.list[index].id	
    	this.mescroll.resetUpScroll()
    },
    
     
     /// 列表调用
     downCallback(mescroll) {
     	mescroll.endSuccess();
     	mescroll.resetUpScroll();
     },	
     async upCallback(mescroll) {
     	let that = this;
     	let result = await that.$request({
     		loading: 1,
     		method: 'post',
     		url: '/chat/yuehui/getMyJoin',
     		data: {
				searchKey:this.searchKey,
     			quan_id:that.id,				
				cate_id:that.dalei,
     			page: mescroll.num
     		}
     	});
     	if (result.statusCode == 200) {
     		if (result.data.code == 200) {					
     		if (mescroll.num == 1) {		
     			that.content = result.data.data.data;
     		} else {
     			that.content = that.content.concat(result.data.data.data);
     		}
     		mescroll.endSuccess(result.data.data.data.length,result.data.data.data.length >= mescroll.size);	
     						
     		} else {
     			uni.showToast({
     				icon: 'none',
     				title: result.data.msg
     			});
     		}
     	} else {
     		uni.showToast({
     			icon: 'none',
     			title: that.$errorMsg
     		});
     	}
     },
     
     
     

      
    }
  }
</script>

<style lang="scss" scoped>
  .template-shop{
  }
  /* 底部悬浮按钮 start*/
  .tn-tabbar-height {
  	min-height: 100rpx;
  	height: calc(120rpx + env(safe-area-inset-bottom) / 2);
  }
  
  .tn-footerfixed {
  	    bottom: 0;
  	position: fixed;
  	width: 100%;	
  	z-index: 1024;
  	box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0);
  
  }
  .tn-tag-content {
      border-radius: 8rpx 25rpx 25rpx 8rpx;
      display: inline-block;
      line-height: 35rpx;
      padding: 8rpx 10rpx;
      color: rgba(255,255,255,0.8);
  }
  
</style>
